<template>
  <div>
    <!-- 头部部分 -->
    <div class="header">
      <!-- 那个容器包裹一下 -->
      <topHeader isFixed>
        <div>
           <!-- 点击这个按钮回到search 页面 -->
          <van-search @click="toSearch" v-model="searchInfo.keyword" />
          <!-- 做三个选择卡片 -->
          <!-- 搜索选项标签 -->
          <div class="search-tap">
            <div class="sel" @click="zonghe" :class="{'active' : sortType === 0 }">综合</div>
            <div class="price-sel"  @click="isShowPrice = true">
              <div :class="{'active' : sortType === 1  && (searchInfo.descSorted === false || searchInfo.descSorted === true) }" class="sel">
                价格
              </div>
              <!-- 价格再加俩图标 -->
              <div class="icon">
                <!-- 上箭头是升序 false -->
                <van-icon :class="{active: searchInfo.descSorted === false}" name="arrow-up" />
                <!-- 下面箭头是降序，true -->
                <van-icon :class="{active: searchInfo.descSorted === true}" name="arrow-down" />
              </div>
            </div>
            <div class="sel" :class="{'active' : sortType === 2 }" @click="isCategory=true">分类</div>
          </div>
        </div>
       
      </topHeader>
    </div>
    <!-- 加载中 -->
    <!-- <div v-show="isLoading" style="height: 1px;background-color: #dd1a21;position: relative;margin-top:100px;text-align:center">
      <div style="position:absolute;top:-13px;left:45%;background-color:#fff">
        <van-loading color="#dd1a21" />
      </div>
      
    </div> -->

    <!-- 弹出层选项相关 -->
    <!-- 价格相关弹出层 -->
    <van-popup class="price" v-model="isShowPrice" position="top" :style="{ height: '160px' }" >
      <!-- 主要内容区域 -->
      <div class="container">
        <!-- 两个筛选框 -->
        <div>
          筛选
          <!-- <input type="number" v-model="searchInfo.floorPrice"> -->
          <input type="number" ref="floorPrice" placeholder="最低价">
          -
          <!-- <input type="number" v-model="searchInfo.upperPrice"> -->
          <input type="number" ref="upperPrice" placeholder="最高价">
        </div>
        <!-- 排序 -->
        <div class="sort">
          <div>排序</div>
          <div class="tag" @click="changSortTag(false)" :class="{ 'active': searchInfo.descSorted === false }">从低到高</div>  
          <div class="tag" @click="changSortTag(true)" :class="{ 'active': searchInfo.descSorted === true }">从高到低</div>  
        </div> 
        
        <!-- 排序规则 -->
      </div>
      <!-- bottom-btn 底部按钮区域 -->
      <div class="bottom-btn">
        <div class="clear" @click="isShowPrice=false">取消</div>
        <div class="confirm" @click="checkPriceInfo">确认</div>
      </div>
    </van-popup>
    <!-- 分类弹出层 -->
    <van-popup class="category" v-model="isCategory" position="top">
      <div @click="changeCategory(tag.id)" class="tag" :class="{ active: searchInfo.categoryId === tag.id }" v-for="tag in categoryL1List" :key="tag.id" >{{ tag.name }}</div>
    </van-popup>
    <!-- 包裹组件 -->

    <!-- 
      调用组件传递数据
      finished 是false 代表还有数据， 这里我们取个反
     -->
    <van-list
      v-model="isLoading"
      :finished="!hasMore"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <productList :productList="productList"></productList>
    </van-list>
  </div>
</template>

<script>
import { reqSearchProductList } from '@/axios'
import { saveHistory } from '@/utils/searchHistory'

export default {
  name: 'manySearch',
  data(){
    return {
      isShowPrice: false, // 是否展示价格选项
      isCategory: false, // 是否展示分类选项
      searchInfo: { // 搜索信息， 复杂的条件搜索信息
        keyword: this.$route.query.keyword, // 关键字
        descSorted: undefined, // 是否是降序， true ，是详细，false 是升序， 不传就是没有这个规则
        size: 10, // 条数
        sortType: 0, // 排序类型 0是综合 1 是分类
        floorPrice: -1, // 最低价格
        upperPrice: -1, // 最高价格
        categoryId: 0, // 分类id
        itemId: 0, // 继续加载的商品数据
      },
      productList: [], // 搜索到的商品列表数据
      categoryL1List: [], // 返回的分类列表，可以用于条件查询
      hasMore: true, // 默认给他是还有加载更多，这样就会有个动画效果，是否还有更多，有更多下拉还会刷新的
      sortType: 0, // 排序类型，0综合 1 价格 2 分类
      isLoading: false, // 是否是加载中
    }
    
  },
  methods:{
    // 加载更多
    async onLoad(){
      // console.log('加载数据。。')
      // 加载更多获取到的数据直接push
      this.searchProductList('loadingMore')
      
    },
    // 搜索商品组件
    async searchProductList(type){
      // this.isLoading = true
      // 每次发送请求之前先清空原来的数据
      // 不能清除拉
      if(type !== 'loadingMore') this.productList = []
      // 每次发送请求之前开启loading 加载动画
      this.isLoading = true
      this.hasMore = true
      //进来就发送请求把
      const res = await reqSearchProductList(this.searchInfo)
      // 关闭加载动画
      this.isLoading = false
      // this.isLoading = false
      // 每次清楚掉数据
      this.searchInfo.itemId = 0
      // 分为加载更多， 和修改搜索条件
      if(type !== 'loadingMore'){
        this.productList = res.data.directlyList
      }else if (res.data.directlyList !== null){
        this.productList.push(...res.data.directlyList)
      } 

      
      // 查询到商品的分类的信息数据
      this.categoryL1List = res.data.categoryL1List
      this.hasMore = res.data.hasMore
      
      // 如果有更多就存储数据
      if(this.hasMore){
        this.searchInfo.itemId = this.productList[this.productList.length-1].id
      }
    },
    // 去搜索页
    toSearch(){
      this.$router.push({
        path: '/search',
        query: { keyword: this.searchInfo.keyword }
      })
    },
    // 修改标签状态
    changSortTag(type){
      // 如果原来的值是boolean 值就重置为undefined
      if(typeof this.searchInfo.descSorted === 'boolean' && this.searchInfo.descSorted === type){
        return this.searchInfo.descSorted = undefined
      }
      this.searchInfo.descSorted = type
    },
    // 确认价格信息
    checkPriceInfo(){
      this.isShowPrice = false
      // 获取价格区间信息，然后搜索 floorPrice 
      const floorPrice = this.$refs.floorPrice.value
      const upperPrice = this.$refs.upperPrice.value
      if(floorPrice>0) this.searchInfo.floorPrice = floorPrice
      if(upperPrice>0) this.searchInfo.upperPrice = upperPrice
      this.searchInfo.sortType = 1
      this.sortType = 1
      // 调用接口发送数据
      this.searchProductList()
    },
    zonghe(){
      this.sortType = 0
      this.searchInfo.sortType = 0
      // 调用接口数据进行处理
      this.searchProductList()
    },
    // 修改分类的id
    changeCategory(id){
      // 如果本身id等于id 就不发请求
      if(id === this.searchInfo.categoryId) return
      this.searchInfo.categoryId = id
      // 关闭展示选择分类的窗口
      this.isCategory = false
      // 修改查询条件
      this.searchInfo.sortType = 1
      // 修改选择状态，0综合，1价格，2分类
      this.sortType = 2
      // 调用接口
      this.searchProductList()
    }

  },
  mounted(){
    // 每次挂载的时候进行搜索
    // 存储携带过来的搜索
    saveHistory(this.$route.query.keyword)
  }
}
</script>

<style lang="less">
.van-overlay{
  top: 90px;
}
.van-popup--top{
  top: 90px;
}
// 头部样式
.header{
  position: relative;
  z-index: 99999;
  // 搜索条件区域样式
  .search-tap{
    font-size: 14px;
    height: 1rem;
    line-height: 1rem;
    color: #666;
    display: flex;
    justify-content: space-around;
    background-color: #fafafa;
    border-bottom: 1px solid #ddd;
    // 默认选中状态是红色
    .sel{
      &.active{
        color: #dd1a21;
      }
    }
    .price-sel{
      display: flex;
      .icon{
        display: flex;
        margin-top: 5px;
        flex-direction: column;
        font-size: 10px;
        transform: scale(0.7);
        // 下面的选中效果
        .active{
          color: #dd1a21;
        }
      }
    }
  }
}
// 弹出层样式
.price{
  font-size: 14px;
  .container{
    padding: 20px 15px;
    input{
      margin-left: 5px;
      width: 140px;
      height: 25px;
      border: 1px solid gray;
      text-align: center;
      color: #7f7f7f;
      &:focus{
        border-color: #dd1a21;
      }
    }
    // 排序样式
    .sort{
      margin-top: 15px;
      display: flex;
      align-items: center;
      .tag{
        margin-left: 10px;
        border: 1px solid #999;
        padding: 5px 10px;
        &.active{
          border-color: #dd1a21;
        }
      }

    }
  }
  // 底部按钮样式
    .bottom-btn{
      border: 1px solid #999;
      border-left: 0;
      border-right: 0;
      display: flex;
      // 两个按钮
      div{
        flex: 1;
        text-align: center;
        line-height: 50px;
        height: 50px;
        box-sizing: border-box;
        border-right: 1px solid #999;
        &:last-child{
          border: 0;
        }
        // 确认框区域
        &.confirm{
          color: #dd1a21;
        }
      }
    }
}
// 分类弹出层样式
.category{
  font-size: 14px;
  padding: 16px 30px;
  display: flex;
  flex-wrap: wrap;
  padding-right: 50px;
  .tag{
    padding: 5px 10px ;
    border: 1px solid #999;
    margin-right: 23px;
    margin-bottom: 20px;
    &.active{
      color: #dd1a21;
      border-color: #dd1a21;
    }
  }

}

</style>